import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClock, faUser, faArrowRight, faAngleRight } from '@fortawesome/free-solid-svg-icons';
import course1 from './调整照片尺寸 (1).png';
import course2 from './调整照片尺寸.png';
import { Link } from 'react-router-dom'; // 仅用Link实现跳转
import './CoursesSection.css';
import { useSearchParams } from 'react-router-dom';
//逻辑已处理完毕
const courseData = [
  {
    id: 1,
    title: '力量训练',
    level: '进阶',
    levelColor: 'level-tag--primary',
    imgSrc: course1,
    desc: '专注肌肉增长与力量提升，专业教练指导',
    duration: '60分钟/节',
    coach: '宋教练',
    // 公开视频链接（直接复制可用）
    videoPath: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4'
  },
  {
    id: 2,
    title: '有氧运动',
    level: '入门',
    levelColor: 'level-tag--secondary',
    imgSrc: course2,
    desc: '高效燃脂，提升心肺功能，适合减重塑形',
    duration: '45分钟/节',
    coach: '徐教练',
    videoPath: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4'
  },
  {
    id: 3,
    title: '瑜伽训练',
    level: '全级别',
    levelColor: 'level-tag--green',
    imgSrc: 'https://picsum.photos/id/188/600/400',
    desc: '改善柔韧性，缓解压力，适合所有年龄段',
    duration: '75分钟/节',
    coach: '周教练',
    videoPath: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-480p.mp4'
  }
];

const CoursesSection = () => {
  const [searchParams]=useSearchParams();
  const email=searchParams.get("email");
  return (
    <div>
      {/* 标题区域 */}
      <div className="section-header">
        <h2 className="section-title1">专业健身课程</h2>
        <p className="section-desc1">从新手到进阶，满足你的健身需求</p>
      </div>

      {/* 课程卡片列表 */}
      <section id="courses" className="courses-section">
        <div className="container">
          <div className="courses-grid">
            {courseData.map(course => (
              // 核心：点击卡片跳转到Watch页，传递视频链接
              <Link 
                key={course.id} 
                to={`/Watch?VideoPath=${course.videoPath}&email=${email}`} // 仅传递必要的视频路径
                className="course-card-link"
              >
                <div className="course-card">
                  {/* 课程图片 */}
                  <div className="course-img-box">
                    <img 
                      src={course.imgSrc} 
                      alt={course.title} 
                      className="course-img"
                    />
                    {/* 难度标签 */}
                    <span className={`level-tag ${course.levelColor}`}>
                      {course.level}
                    </span>
                  </div>

                  {/* 课程信息 */}
                  <div className="course-info">
                    <h3 className="course-title">{course.title}</h3>
                    <p className="course-desc">{course.desc}</p>

                    {/* 时长+教练 */}
                    <div className="course-meta">
                      <div className="meta-item">
                        <FontAwesomeIcon icon={faClock} className="meta-icon" />
                        <span className="meta-text">{course.duration}</span>
                      </div>
                      <div className="meta-item">
                        <FontAwesomeIcon icon={faUser} className="meta-icon" />
                        <span className="meta-text">教练：{course.coach}</span>
                      </div>
                    </div>

                    {/* 查看详情提示 */}
                    <div className="course-link">
                      观看视频 <FontAwesomeIcon icon={faArrowRight} className="link-icon" />
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {/* 查看全部按钮（可选） */}
          <div className="view-all-btn-box">
            <Link to={`/AllVideos?email=${email}`} className="view-all-btn">
              查看全部课程 <FontAwesomeIcon icon={faAngleRight} className="btn-icon" />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default CoursesSection;